<template>
  <div>
  <SumbitDialog 
        class="deldialog"
        width="520px"
        :dialogVisible.sync="deldialogVisible"
        @onClose="closeWorkspace"
        sumbitColor="#F53F3F"
        sumbitText="确定删除">
        <div slot="title">
            <p style="line-height: 25px">存档工作台</p>
            <p class="font_14 font_weight_400" style="color: #5C636C;line-height: 20px">请选择你想添加的存档文件夹</p>
        </div>
        <div>
            <div class="add_btn flexbox flexcenter flexjust font_weight_500" style="margin: 20px;" v-if="!isCreat" @click="isCreat = true">新建存档文件夹</div>
            <div class="add_input flexbox flexcenter" :style="workData.archive.length>=6?'padding-right: 28px':''"  v-else>
                  <el-input placeholder="请输入内容" v-model="workspaceName" :autofocus="true" v-focus  class="input-with-select">
                    <el-button slot="append" @click="saveWorkspace">新建并存档</el-button>
                </el-input>
                <div class="add_btn flexbox flexcenter flexjust font_weight_500" style="width: 70px;"  @click=" workspaceName = '' ,isCreat = false">取消</div>
            </div>
            <div class="file_list" v-loading="m_loading">
                <div class="file_item flexbox flexcenter flexbetween" v-for="item in workData.archive">
                    <div class="flexbox flexcolumn">
                        <p class="file_name font_weight_500">{{item.workspace_name}}</p>
                        <p style="color: #5C636C;">{{item.workspace_num}}条素材</p>
                    </div>
                    <div class="add_btn flexbox flexcenter flexjust font_weight_500" style="width: 80px;height: 32px" @click="delWorkspace(item)" v-if="item.isSave" >已存档</div>
                    <div class="save_btn flexbox flexcenter flexjust"  @click="saveWorkList(item)" v-else >存档</div>
                </div>
            </div>
        </div>
    </SumbitDialog>
  </div>
</template>

<script>
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
    data() {
        return {
            m_loading:false,
            deldialogVisible:false,
            workData:{},
            selecteData:[],
            isCreat:false,
            workspaceName:""
        }
    },
    created() {
        
    },
    methods: {
        closeWorkspace(){
            if(this.$parent.$refs.storyVideo){
                this.$parent.$refs.storyVideo.clearSelect();
            }else{
                this.$parent.$refs.DrawerLeft.clearSelect()
            }
        },
        
        saveWorkspace(){
            this.m_loading = true;
            this.$http.post("adminapi/materialfj/workspaceCreate",{
                workspace_name:this.workspaceName,
                video_id:this.selecteData.map(e=>e.video_id)
            }).then((res) => {
                if (res.data.code == 200){
                    this.$message.success('存档成功')
                    this.workData.archive.unshift({
                        workspace_name:this.workspaceName,
                        workspace_id:res.data.data.workspace_id,
                        workspace_num:this.selecteData.length,
                        isSave: true
                    })
                }else{
                    this.$message.error(res.data.msg)
                }   
                    this.workspaceName = "";
                    this.isCreat = false;
                    this.m_loading = false;
            });
            
        },
        getWorkspaceList(){
            this.$http.post("adminapi/materialfj/workspaceList",).then((res) => {
                if (res.data.code == 200){
                    res.data.data.archive.forEach(element => {
                        element.isSave = false;
                    });
                    this.workData = res.data.data;
                }else{
                    this.$message.error(res.data.msg)
                }
                    this.m_loading = false;
            });
        },
        keepWorkspace(data){
            this.m_loading = true;
            this.selecteData = data;
            this.getWorkspaceList()
            this.deldialogVisible = true;
        },
        saveWorkList(item){
            this.m_loading = true;
            let video_Arr =  this.selecteData.map(e=>e.video_id);
            this.$http.post("adminapi/materialfj/workspaceMaterialAdd",{
                workspace_id:item.workspace_id,
                video_id:video_Arr,
            }).then((res) => {
                if (res.data.code == 200){
                    this.$message.success('存档成功')
                    item.workspace_num += this.selecteData.length;
                    item.isSave = true;
                }else{
                    this.$message.error(res.data.msg)
                }
                this.m_loading = false;
            });
        },
        delWorkspace(item){
            this.m_loading = true;
            let video_Arr =  this.selecteData.map(e=>e.video_id);
             this.$http.post("adminapi/materialfj/workspaceMaterialRemove",{
                workspace_id:item.workspace_id,
                video_id:video_Arr,
            }).then((res) => {
                if (res.data.code == 200){
                    this.$message.success('取消存档成功')
                    item.workspace_num -= this.selecteData.length;
                    item.isSave = false;
                }else{
                    this.$message.error(res.data.msg)
                }
                    this.m_loading = false;
            });
        }
    },
    components: {
        SumbitDialog
    },
}
</script>

<style scoped>
::-webkit-scrollbar-track-piece{
    border-radius: 8px;
}
.deldialog >>> .el-dialog__header.el-dialog__header{
    padding:20px !important;
    border-bottom: 1px solid #EBEBEB !important;
}
.deldialog >>> .el-dialog__body.el-dialog__body{
    padding: 0px !important;
}
.deldialog >>> .el-dialog__footer{
    display: none !important;
}

/deep/ .el-input__inner{
    border-color: #165DFF;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
/deep/ .el-input-group__append{
    border-color: #165DFF;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #165DFF;
    background: #F5F7FF;
}
.add_btn{
    cursor: pointer;
    height: 40px;
    /* width: 100%; */
    border-radius: 8px;
    border: 1px solid #E8EAEC;
    background:#FBFBFC;
    color: #5C636C;
}
.add_input{
    padding: 20px;
    gap: 8px;
}
.file_list{
    min-height: 300px;
    padding: 0 20px;
    max-height: 420px;
    overflow: auto;
}
.file_item{
    height: 48px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E8EAEC;
    margin-bottom: 12px;
}
.file_name{
    margin-bottom: 8px;
    color:#191B1E;
}
.save_btn{
    cursor: pointer;
    color: #165DFF;
    width: 80px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #165DFF;
}
</style>